<template>
  <div>
    <el-dialog
      title="新建盘点单"
      :visible.sync="visible"
      :modal-append-to-body="false"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      @close="closeDialog"
      fullscreen
    >
      <div class="warn">
        <p>
          <strong>说明:</strong>
          <br />标记*的必须录入数据的字段
          <br />
        </p>
      </div>
      <div class="form"></div>
      <el-form
        ref="submit"
        :model="submit"
        label-position="left"
        label-width="105px"
        size="mini"
        inline
      >
        <el-form-item label="单号" label-width="50px">
          <el-input v-model="submit.checkRef" readonly placeholder="提交后自动生成"></el-input>
        </el-form-item>
        <el-form-item label="*业务日期" label-width="80px">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="submit.date"
            value-format="yyyy-MM-dd"
            style="width: 100%;"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="盘点单类型">
         <el-form-item label="盘点单类型">
          <el-input v-model="submit.typename" readonly></el-input>
        </el-form-item>
        </el-form-item>
        <br />

        <el-form-item label="*盘点仓库" label-width="75px">
          <el-select v-model="submit.storeid" placeholder="请选择分类">
            <el-option
              v-for="item in storeList"
              :key="item.username"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="*业务员" label-width="68px">
          <el-input v-model="submit.bizname" style="width:150px;"></el-input>
          <el-popover placement="right" width="300" v-model="UserListApp.visible">
            <div style="width:300px">
              <el-table
                border
                :data="Lists.userList"
                @row-click="selectUser"
                :stripe="true"
                :header-cell-style="{background:'#e3e5e9',color:'#606266'}"
                :row-style="{height:'5px'}"
                :cell-style="{padding:'5px 0'}"
                tooltip-effect="light"
                highlight-current-row
                style="width: 100%;"
                height="300px"
              >
                <el-table-column prop="name" label="姓名"></el-table-column>
              </el-table>
              <div style="width:100px;background:red;margin:3px auto;">
                <el-button type="primary" @click="SureSelectUser">确定选择业务员</el-button>
              </div>
            </div>
            <el-button slot="reference" @click="UserListApp.visible=true">选择</el-button>
          </el-popover>
        </el-form-item>
        <br />
        <el-form-item label="备注" label-width="40px">
          <el-input v-model="submit.memo" style="width:700px;"></el-input>
        </el-form-item>
      </el-form>
      <div>
        <el-table
          border
          :data="App_detail_list.list"
          size="mini"
          :row-style="{height:'5px'}"
          :cell-style="{padding:'5px 0'}"
        >
          <el-table-column  label="序号" width="50">
            <template slot-scope="scope">
              <span>{{scope.$index + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column  label="商品编码" width="250">
            <template slot-scope="scope">
              <el-input
                size="mini"
                placeholder
                v-show="scope.row.show"
                v-model="scope.row.code"
                style="width:150px"
              ></el-input>
              <el-popover
                placement="right"
                v-model="scope.row.Listvisible"
                width="300"
                trigger="click"
              >
                <el-table
                  :data="miniApp_Good_List.list"
                  @row-click="selectGood"
                  highlight-current-row
                >
                  <el-table-column width="150" property="code" label="编码"></el-table-column>
                  <el-table-column width="100" property="name" label="商品名称"></el-table-column>
                </el-table>
                <el-button size="mini" @click="SureGood(scope.row)">确定选择该商品</el-button>
                <el-button
                  style="padding:auto 0"
                  size="mini"
                  v-show="scope.row.show"
                  @click="scope.row.Listvisible=true"
                  slot="reference"
                >选择</el-button>
              </el-popover>
              <span v-show="!scope.row.show">{{scope.row.code}}</span>
            </template>
          </el-table-column>
          <el-table-column label="商品名称" prop="name" width="200"></el-table-column>
          <el-table-column show-overflow-tooltip prop="spec" label="规格型号" width="250"></el-table-column>
          <el-table-column show-overflow-tooltip label="盘点后数量" width="95">
            <template slot-scope="scope">
              <el-input
                size="mini"
                placeholder
                v-show="scope.row.show"
                v-model="scope.row.count"
                @keyup.native="oninput"
              ></el-input>
              <span v-show="!scope.row.show">{{scope.row.count}}</span>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip label="单位" prop="unitname" width="125"></el-table-column>

          <el-table-column show-overflow-tooltip label="备注" width="410">
            <template slot-scope="scope">
              <el-input
                size="mini"
                placeholder
                v-show="scope.row.show"
                style="width:380px"
                v-model="scope.row.memo"
              ></el-input>
              <span v-show="!scope.row.show">{{scope.row.memo}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="scope.row.show =true">编辑</el-button>
              <el-button size="mini" @click="save(scope.row)">保存</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="visible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="Submit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import treeTable from "../../multiplexing/treetable";
export default {
  components: { treeTable },
  props: {
    form: {
      style: Object
    }
  },
  data() {
    return {
      selectUserList: [],
      submit: {
        id: "",
        typename: "验货盘点",
        storeid: "",
        returnRef: "/",
        checkRef: "/",
        calRef: "/",
        date: "",
        bizname: "",
        memo: "",
        statu: "待盘点",
        storename: ""
      },
      visible: true,
      Lists: {
        orangeList: [],
        userList: []
      },
      treeApp: {
        hackReset: false,
        visible: false,
        here_list: {},
        firstColumn: {
          name: "机构组织名",
          prop: "name",
          width: "300"
        }
      },
      UserListApp: {
        visible: false
      },
      App_detail_list: {
        list: [],
        SelectRow: {}
      },
      miniApp_Good_List: {
        visible: false
      },
      storeList: []
    };
  },
  methods: {
    save(row) {
      // row.money = row.count*row.price
      window.console.log(row);

      row.show = false;
    },
    //控制两位小数输入
    oninput(e) {
      e.target.value =
        e.target.value.match(/^\d*([.]?([0-9]{0,2}))/g)[0] || null;
    },

    Check() {
      if (
        this.submit.date == null ||
        this.submit.date == "" ||
        this.submit.typename == null ||
        this.submit.typename == "" ||
        this.submit.bizname == null ||
        this.submit.bizname == "" ||
        this.submit.storeid == null ||
        this.submit.storeid == "" ||
        this.App_detail_list.list == null ||
        this.App_detail_list.list.length == 0
      ) {
        this.$message.error("请录入完整的数据！");
        return false;
      }
      return true;
    },
    Submit() {
      window.console.log(this.submit);
      window.console.log("list", this.App_detail_list.list);

      if (this.Check()) {
        var day = new Date();
        day.setTime(day.getTime());
        this.submit.ref =
          "CO" +
          day.getFullYear() +
          (day.getMonth() + 1) +
          day.getDate() +
          day.getHours() +
          day.getMinutes() +
          day.getSeconds();
        this.$http
          .get("store/selectOne", {
            params: {
              id: this.submit.storeid
            }
          })
          .then(response => {
            this.submit.storename = response.data.name;
            this.$http.post("assetCheck/update", this.submit).then(response => {
              this.App_detail_list.list.forEach(row => {
                row.checkId = response.data;
              });
              this.$http
                .post("assetCheckDetail/update", this.App_detail_list.list)
                .then(response => {
                  if (response.data == "success") {
                    this.$message({
                      message: "添加完成",
                      type: "success"
                    });
                    this.NeedRefresh();
                    window.console.log('detail',this.App_detail_list.list);
                    
                    this.visible = false;
                  }
                });
            });
          });
      }
    },
    closeDialog() {
      window.console.log("dfialog-close");
      this.$emit("dialog-close");
    },
    NeedRefresh() {
      this.$emit("refresh");
    },
    selectSuppliser(Row) {
      this.submit.suppliername = Row.name;
      this.submit.contact = Row.concact;
      this.submit.phone = Row.phone;
    },
    selectFather(node) {
      this.submit.orangename = node.name;
      this.$http
        .post("user/getuserlist", { orangeid: node.id })
        .then(response => {
          this.selectUserList = response.data;
        });
    },
    selectUser(Row) {
      this.submit.bizname = Row.name;
    },
    selectGood(Row) {
      this.miniApp_Good_List.SelectRow = JSON.parse(JSON.stringify(Row));
    },
    GetLists() {
      this.$http.get("/user/list").then(response => {
        this.Lists.userList = response.data;
      });
      this.$http.post("/good/someGoodList", {}).then(response => {
        this.miniApp_Good_List.list = response.data;
      });
      this.$http.get("/store/list").then(response => {
        this.storeList = response.data;
      });
      this.$http
        .post("/assetCheckDetail/list", { checkId: this.form.id })
        .then(response => {
          let llist = response.data;
          // this.App_detail_list.list.splice(0, this.App_detail_list.list.length);
          llist.forEach(Row => {
            this.App_detail_list.list.push({
              id: "",
              checkId: "",
              code: "",
              name: "",
              spec: "",
              count: "",
              unitname: "",
              memo: "",
              show: false
            });
            this.App_detail_list.list[this.App_detail_list.list.length-1] = Object.assign(this.App_detail_list.list[this.App_detail_list.list.length-1], Row);
            // this.App_detail_list.list[this.App_detail_list.list.length-1] = JSON.parse(JSON.stringify(Row))
          });
        });
    },
    SureSelectOrange() {
      this.treeApp.visible = false;
    },
    SureSelectUser() {
      this.UserListApp.visible = false;
    },
    SureGood(Row) {
      this.miniApp_Good_List.SelectRow.id = Row.id
      Row = Object.assign(Row, this.miniApp_Good_List.SelectRow);
      Row.Listvisible = false;
      // Row.name = this.miniApp_Good_List.SelectRow.name
      window.console.log("select", this.miniApp_Good_List.SelectRow);
      window.console.log("Row", Row);
    }
  },
  created() {
    this.submit = JSON.parse(JSON.stringify(this.form));
    window.console.log("submit", this.submit);
    this.GetLists();
  }
};
</script>

<style>
.form {
  margin-top: 20px;
}
</style>